<template>
  <view class="statistical-module">
    <view class="info-row" @click="jumpPointDetail">
      <view class="title">
        今天是你打卡的第<text class="day">{{ days }}</text>天
      </view>
      <view class="total-coins">
        <image src="../../../../static/images/points/coin_20x20.png" style="width: 20px;height:20px;" />
        <view class="coins-value">{{ userInfo.points }}</view>
        <u-icon bold name="arrow-right" color="#000" size="15" />
      </view>
    </view>
    <view class="action-row">
      <view class="item">
        <view class="label">设提醒</view>
        <view class="value-wrap" @click="onToSetting">
          <view class="value">{{ time }}</view>
          <u-icon bold name="arrow-down" color="#000" size="12" />
        </view>
      </view>

      <view class="item">
        <view class="label">选产品</view>
        <view class="value-wrap" @click="onToSetting">
          <view class="value">已选{{ productCount }}</view>
          <u-icon bold name="arrow-right" color="#000" size="12" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
export default {
  name: 'StatisticalModule',
  components: {},
  data() {
    return {
      time: '',
      productCount: 0,
      days: 0,
      points: 0
    }
  },
  computed: {
    ...mapState(['clockInDetail', 'userInfo'])
  },
  watch: {
    clockInDetail(val) {
      if (!val.clockin_data) return
      const {
        clockin_data,
        clockin_days
      } = val
      this.days = clockin_days.length
      if (clockin_data) {
        const {
          notify_time,
          product_ids
        } = clockin_data
        this.time = notify_time
        this.productCount = product_ids ? product_ids.split(',').length : 0
      }
    }
  },
  methods: {
    jumpPointDetail() {
      wx.navigateTo({
        url: '/pagesPoints/pointDetail'
      })
    },
    onToSetting() {
      this.$utils.navigateToPage('/pagesClockIn/clockInSetting', 'action=edit-setting')
    }
  }
}
</script>

<style lang="scss" scoped>
	.statistical-module {
		width: 95%;
		padding: 0 26rpx;
		margin: 20rpx auto 0;
		background: #FFF;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 6rpx 0 rgba(0, 0, 0, 0.05);

		.info-row {
			@include flex-between;
			padding: 26rpx 0;
			margin-bottom: 32rpx;
			border-bottom: 1px solid #E6E6E6;

			.title {
				font-size: 32rpx;
				font-weight: bolder;

				.day {
					color: $theme-color;
				}
			}

			.total-coins {
				@include flex-column-center;
				gap: 10rpx;

				.coins-value {
					font-weight: bolder;
					font-size: 32rpx;
				}
			}
		}

		.action-row {
			@include flex-center;
			padding-bottom: 32rpx;
			gap: 38rpx;

			.item {
				// width: 45%;
				height: 64rpx;
				padding: 0 26rpx;
				@include flex-between;
				border-radius: 50rpx;
				border: 1Px solid #E6E6E6;
				font-size: 28rpx;

				.label {
					padding-right: 38rpx;
				}

				.value-wrap {
					@include flex-column-center;
					gap: 5rpx;
				}
			}
		}
	}
</style>
